<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html>
<!--<![endif]-->

<head>
<meta charset="utf-8">
<title>系统界面</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="favicon.ico">
<!-- css styles -->
<link href="css/bootstrap.css" rel="stylesheet"><!--基本样式-->
<link href="css/style.css" rel="stylesheet"><!--样式-->
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/animate.delay.css" rel="stylesheet"><!--图片动画-->
<link href="css/font-awesome.min.css" rel="stylesheet" ><!--字体图标-->
<link href="css/colorbox.css" rel="stylesheet" >
<!--[if IE 7]>
<link href="css/font-awesome-ie7.min.css" rel="stylesheet">
<![endif]-->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-migrate-1.1.1.min.js"></script>
</head>

<body class="loginbody">

<div class="loginwrapper animate1 bounceInDown">
	<div class="loginwrap zindex100 animate1 bounceInDown">
	<h1 class="logintitle"><span class="icon-user"></span> 用户登录 </h1>
        <div class="loginwrapperinner">
            <form id="loginform" action="demo.html" method="post">
                <p class="animate4 bounceIn"><input type="text" id="username" name="username" placeholder="用户名" /></p>
                <p class="animate5 bounceIn"><input type="password" id="password" name="password" placeholder="密 码" /></p>
                <p class="animate6 bounceIn"><button class="btn btn-info btn-block">登 录</button></p>
                <p class="animate7 fadeIn"><a href="demo.html"><span class="icon-question-sign icon-white"></span> 忘记密码?</a></p>
            </form>
        </div><!--loginwrapperinner-->
    </div>
</div><!--loginwrapper-->

<script type="text/javascript">
jQuery.noConflict();

jQuery(document).ready(function(){
	
	var anievent = (jQuery.browser.webkit)? 'webkitAnimationEnd' : 'animationend';
	jQuery('.loginwrap').bind(anievent,function(){
		jQuery(this).removeClass('animate2 bounceInDown');
	});
	
	jQuery('#username,#password').focus(function(){
		if(jQuery(this).hasClass('error')) jQuery(this).removeClass('error');
	});
	
	jQuery('#loginform button').click(function(){
		if(!jQuery.browser.msie) {
			if(jQuery('#username').val() == '' || jQuery('#password').val() == '') {
				if(jQuery('#username').val() == '') jQuery('#username').addClass('error'); else jQuery('#username').removeClass('error');
				if(jQuery('#password').val() == '') jQuery('#password').addClass('error'); else jQuery('#password').removeClass('error');
				jQuery('.loginwrap').addClass('animate0 wobble').bind(anievent,function(){
					jQuery(this).removeClass('animate0 wobble');
				});
			} else {
				jQuery('.loginwrapper').addClass('animate0 fadeOutUp').bind(anievent,function(){
					jQuery('#loginform').submit();
				});
			}
			return false;
		}
	});
});
</script>
</html>
